<template>
  <div class="pattern-center single-center">
    <div class="pattern-attachment-img"><img :src="store.state.postInfo.cover"
                                             :data-src="store.state.postInfo.cover"
                                             class="lazyload" onerror="imgError(this,3)"
                                             style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;">
    </div>
    <header class="pattern-header single-header"><h1 class="entry-title">{{ store.state.postInfo.title }}</h1>
      <p class="entry-census"><span><a href="https://2heng.xin/author/Mashiro/"><img
          src="https://gravatar.loli.net/avatar/cd2b3a164c977539712929f66cad335c?s=96&amp;d=mm&amp;r=g"></a></span><span><a
          href="https://2heng.xin/author/Mashiro/">{{ store.state.postInfo.author }}</a></span><span class="bull">·</span>{{ store.state.postInfo.createTime }}<span
          class="bull">·</span>{{ store.state.postInfo.views }} 次阅读</p></header>
  </div>
  <div id="content" class="site-content">
    <div id="primary" class="content-area">
      <main id="main" class="site-main" role="main">
        <article id="post-4491"
                 class="post-4491 post type-post status-publish format-standard has-post-thumbnail hentry category-hacking tag-graphql tag-javascript tag-wordpress">
          <div class="entry-content" v-html="store.state.postInfo.context">
          </div>
          <div class="single-reward">
            <div class="reward-open">赏
              <div class="reward-main">
                <ul class="reward-row">
                  <li class="alipay-code"><img src="https://media.inyaa.cn/cover/ece1cc3bd65c4825ab76c1d43f99284e.png">
                  </li>
                  <li class="wechat-code"><img src="https://media.inyaa.cn/cover/2731eb9af31c421da18e8742271e121c.png">
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <footer class="post-footer">
            <div class="post-lincenses"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh"
                                           target="_blank" rel="nofollow"><i class="fa fa-creative-commons"
                                                                             aria-hidden="true"></i>
              知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a></div>
            <div class="post-tags"><i class="iconfont icon-tags"></i> <a href="https://2heng.xin/tag/graphql/"
                                                                         rel="tag">GraphQL</a> <a
                href="https://2heng.xin/tag/javascript/" rel="tag">JavaScript</a> <a
                href="https://2heng.xin/tag/wordpress/" rel="tag">WordPress</a></div>
            <div class="post-like"><a href="javascript:;" data-action="ding" data-id="4491" class="specsZan "> <i
                class="iconfont icon-like"></i> <span class="count"> 39</span> </a></div>
          </footer>
        </article>
        <section class="post-squares nextprev">
          <div class="post-nepre full previous"><a href="https://2heng.xin/2019/09/18/fix-100-vh-in-mobile-browser/"
                                                   rel="prev">
            <div class="background"><img class="lazyload"
                                         style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;"
                                         src="https://2heng.xin/wp-content/uploads//2018/06/child-1024x576.jpg"></div>
            <span class="label">Previous Post</span>
            <div class="info"><h3>解决移动端浏览器 vh 单位异常问题</h3>
              <hr>
            </div>
          </a></div>
          <div class="post-nepre half next"></div>
        </section>
      </main>
    </div>
  </div>
  <section id="comments" class="comments">
    <div class="comments-main">
      <h3 id="comments-list-title">Comments | <span class="noticom">{{ store.state.postInfo.comments }} 条评论 </span>
      </h3>
      <div id="loading-comments" style="display: none;"><span></span></div>
      <ul class="commentwrap">
        <li class="comment even thread-odd thread-alt depth-1" id="comment-1" v-for="comment in data.postCommentList?.content">
          <div class="contents">
            <div class="comment-arrow">
              <div class="main shadow">
                <div class="profile">
                  <a href="https://api.2heng.xin/redirect/?url=https://rabithua.club" target="_blank" rel="nofollow">
                  <img :src="comment.avatar" class="lazyload avatar avatar-24 photo" alt="😀" width="24" height="24"></a></div>
                <div class="commentinfo">
                  <section class="commeta">
                    <div class="left"><h4 class="author">
                      <a href="https://api.2heng.xin/redirect/?url=https://rabithua.club" target="_blank" rel="nofollow">
                        <img :src="comment.avatar" class="lazyload avatar avatar-24 photo" alt="😀" width="24" height="24">
                        <span class="bb-comment isauthor" title="博主">博主</span> {{comment.name}}
                        <span class="showGrade0" title="萌萌哒新人~">
                        <img src="https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/images/level/level_0.svg"
                        style="height: 1.5em; max-height: 1.5em; display: inline-block;"></span></a></h4>
                    </div>
                    <a rel="nofollow" class="comment-reply-link" @click="openRespond(1)">Reply</a>
                    <div class="right">
                      <div class="info">
                        <time datetime="2020-01-03">发布于 {{comment.createTime}}</time>
                      </div>
                    </div>
                  </section>
                </div>
                <div class="body">
                  <p>
                  <a :href="comment.toUserAvatar" class="comment-at" v-if="comment.toUserId">@{{comment.toUserName}}</a>
                  {{comment.content}}
                  </p>
                </div>
              </div>
              <div class="arrow-left"></div>
            </div>
          </div>
          <hr>
          <ul class="children" v-if="comment.children && comment.children.length > 0">
            <li class="comment even depth-2" id="comment-7158" v-for="childComment in comment.children">
              <div class="contents">
                <div class="comment-arrow">
                  <div class="main shadow">
                    <div class="profile"><a href="javascript: return false;" rel="nofollow">
                      <img :src="childComment.avatar" class="avatar avatar-80 photo lazyload" height="80" width="80"></a>
                    </div>
                    <div class="commentinfo">
                      <section class="commeta">
                        <div class="left"><h4 class="author">
                          <a href="javascript: return false;" rel="nofollow">
                            <img :src="childComment.avatar" class="avatar avatar-24 photo" height="24" width="24">
                          <span class="bb-comment isauthor" title="博主">博主</span> {{childComment.name}}
                          <span class="showGrade0" title="萌萌哒新人~"><img src="https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/images/level/level_0.svg"
                              style="height: 1.5em; max-height: 1.5em; display: inline-block;"></span></a></h4></div>
                        <a rel="nofollow" class="comment-reply-link" @click="openRespond(1)">Reply</a>
                        <div class="right">
                          <div class="info">
                            <time datetime="2020-03-16">发布于 {{childComment.createTime}}</time>
                          </div>
                        </div>
                      </section>
                    </div>
                    <div class="body"><p>
                      <a :href="childComment.toUserAvatar" class="comment-at" v-if="childComment.toUserId">@{{childComment.toUserName}}</a>&nbsp;
                      {{childComment.content}}
                      </p></div>
                  </div>
                  <div class="arrow-left"></div>
                </div>
              </div>
              <hr>
            </li>
          </ul>
        </li>
      </ul>
      <nav id="comments-navi" v-if="data.postCommentList.content && data.postCommentList.content.length > 0">
        <a class="prev page-numbers" v-if="page === 1">« Older</a>
        <a class="page-numbers" v-for="index of postCommentList.totalPages" v-if="postCommentList.totalPages > 1">{{index}}</a>
        <a class="next page-numbers" v-if="page === postCommentList.totalPages">Newer »</a>
      </nav>
    </div>
    <InyaaPostComment></InyaaPostComment>
    <div id="respond" class="comment-respond" style="display: none;">
      <p>评论内容</p>
      <div class="comment-textarea">
        <textarea placeholder="你是我一生只会遇见一次的惊喜 ..." name="comment" class="commentbody" id="comment" rows="5" tabindex="4"></textarea>
        <label class="input-label active">你是我一生只会遇见一次的惊喜 ...</label>
      </div>
      <p class="form-submit"><input name="button" type="submit" id="submit" class="submit" value="BiuBiuBiu~"></p>
    </div>
  </section>
</template>
<script lang="ts">
import {defineComponent, reactive} from 'vue';
import {CopyOutlined} from '@ant-design/icons-vue';
import InyaaPostComment from "../components/InyaaPostComment.vue";
import {useStore} from "vuex";

export default defineComponent({
  components: {
    CopyOutlined,
    InyaaPostComment
  },
  setup() {
    const store = useStore()
    const data = reactive({
      page: 1,
      commentId: '',
      postInfo: {},
      postCommentList: {},
      commentShow: false
    })

    return {
      store,
      data,
    };
  },
  asyncData({router, store}) {
    return store.dispatch('getPostInfo', router.params.id);
  }
});
</script>


<style scoped>

</style>